সিএসএস৩ মাস্কিং এমন একটি প্রযুক্তি যা ইমেজ বা HTML উপাদানের নির্দিষ্ট অংশকে দৃশ্যমান বা অদৃশ্য করতে ব্যবহার করা হয়। এটি আধুনিক ওয়েব ডিজাইনে অত্যন্ত কার্যকর, কারণ এটি কন্টেন্টকে নির্দিষ্ট আকারে কেটে (mask) বা নির্ধারিত প্যাটার্নে প্রদর্শনের সুযোগ দেয়।
মাস্কিং নির্দিষ্ট পিক্সেল বা প্যাটার্ন ব্যবহার করে একটি উপাদানের দৃশ্যমানতা নিয়ন্ত্রণ করে। এটি প্রধানত মাস্ক ইমেজ (mask image) বা ক্লিপ পাথ (clip path) ব্যবহার করে সম্পন্ন করা হয়।
mask-imageব্যবহার: একটি ইমেজকে মাস্ক হিসাবে ব্যবহার করা হয়। মাস্কের সাদা অংশ দৃশ্যমান হয় এবং কালো অংশ অদৃশ্য থাকে।
div {
mask-image: url('mask.png');
-webkit-mask-image: url('mask.png'); /* পুরোনো ব্রাউজার সাপোর্ট */
}
mask-positionব্যবহার: মাস্ক ইমেজটি কিভাবে পজিশন হবে তা নির্ধারণ করা হয়।
div {
mask-image: url('mask.png');
mask-position: center;
}
mask-repeatব্যবহার: মাস্ক ইমেজটি বারবার রিপিট করবে কিনা তা নির্ধারণ করা হয়।
div {
mask-image: url('mask.png');
mask-repeat: no-repeat;
}
mask-sizeব্যবহার: মাস্ক ইমেজের আকার নির্ধারণ করা হয়।
div {
mask-image: url('mask.png');
mask-size: contain;
}
clip-pathব্যবহার: একটি উপাদানের দৃশ্যমান এলাকা নির্ধারণ করার জন্য ক্লিপ পাথ ব্যবহার করা হয়। এটি ভেক্টর পাথ অনুযায়ী কাজ করে।
div {
clip-path: circle(50% at 50% 50%); /* উপাদানকে বৃত্তাকার আকৃতি দেয় */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masking Example</title>
<style>
.masked-div {
width: 300px;
height: 300px;
background: url('example.jpg') no-repeat center / cover;
mask-image: url('mask.png');
-webkit-mask-image: url('mask.png'); /* ব্রাউজার সাপোর্ট */
}
</style>
</head>
<body>
<div class="masked-div"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
.clipped-div {
width: 300px;
height: 300px;
background: url('example.jpg') no-repeat center / cover;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="clipped-div"></div>
</body>
</html>
| বৈশিষ্ট্য | মাস্কিং (mask) | ক্লিপ পাথ (clip-path) |
|---|---|---|
| কাজের ধরন | পিক্সেল ভিত্তিক | ভেক্টর ভিত্তিক |
| সমর্থন | গ্রেডিয়েন্ট, ইমেজ, অথবা প্যাটার্ন | শুধুমাত্র ভেক্টর পাথ |
| ব্রাউজার সাপোর্ট | নতুন ব্রাউজার | তুলনামূলক বেশি ব্রাউজার সাপোর্ট |
সিএসএস৩ মাস্কিং বৈশিষ্ট্যগুলো প্রধানত আধুনিক ব্রাউজারে সমর্থিত। তবে, mask প্রপার্টি ব্যবহারের ক্ষেত্রে পুরোনো ব্রাউজারের জন্য -webkit- প্রিফিক্স ব্যবহার করা প্রয়োজন।
| ফিচার | সমর্থিত ব্রাউজার |
|---|---|
mask-image | Chrome 24+, Firefox 53+, Safari 7+ |
clip-path | Chrome 55+, Firefox 53+, Edge 16+ |
সিএসএস৩ মাস্কিং ও ক্লিপ পাথ ব্যবহার করে ওয়েবপেজকে আরও চিত্তাকর্ষক ও ব্যবহারযোগ্য করা যায়।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
